<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="贾文清">
    <title>唯品会</title>
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
    <style>
        body {
            margin: 0;
        }
       

        * {
            box-sizing: border-box;
        }

        header {
            color: #333;
            font: 12px;
        }

        .top-nav {
            width: 100%;
            height: 28px;
            line-height: 28px;
            background-color: #f5f5f5;
            color: #777;
        }

        .nav-middle {
            width: 1170px;
            height: 28px;
            margin: 0 auto;
        }

        .left {
            float: left;
        }

        .left .henan {
            font-size: 12px;
            color: #666;
            padding: 0 10px 0 10px;
        }

        .icon {
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid #666;
        }

         .right {
            float: right;
            margin-top: -2px;
            margin-right:-50px;
        } 
         .right{
            display: flex;
            justify-content: space-between;
        } 

        .right>li {
            position: relative;
            padding-right: 15px;
            list-style: none;
        }
        .right>li a {
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }

        .right .right-li span .lihe {
            position: relative;
            top: 2px;
            display: inline-block;
            width: 15px;
            height: 18px;
            background: url(./img/qiandao.gif) no-repeat;
            margin-right: 5px;
        }

        .right .right-li span .phone {
            display: inline-block;
            margin: -2px 3px 0 1px;
            width: 10px;
            height: 14px;
            vertical-align: middle;
            background: url(./img/header.png) no-repeat -100px -150px;
        }
/*----left鼠标进入出现框--------------------------------  */

        .left .left1 .left-box {
            width: 295px;
            height: 300px;
            border: 1px solid #cdcdcd;
            background-color: #fff;
            font-size: 12px;
            padding: 0 30px;
            margin: -1px 0 0 -1px;
            position: relative;
            z-index: 100; 
            display: none;
        }
        .left-box .zheyi{
            display: inline-block;
            width: 98px;
            height: 1px;
            background-color: white;
            position: relative;
            left:-30px;
            top:-18px;
        }

        .left-box p {
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            position: relative;
            color: #000;
            border-bottom-width: 10px;
            border-bottom: 1px dotted #666;
        }

        .left-box table span {
            padding-left: 10px;
        }
          .left-box table td span:hover {
              color: #f10180;
          } 

        .left .left1 {
            width: 100px;
            height: 28px;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
        }

        .left1:hover .icon {
            transform-origin: center center;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid transparent;
            border-bottom: 4px solid #f10180;
        }

        .left1:hover {
            border-left: 1px solid #cdcdcd;
            border-right: 1px solid #cdcdcd;
            background-color: #fff;
        }
        .left11:hover  span{
            color: #f10180;
        }

        .left1:hover .left-box {
            display: block;
        }
/*----right 请登录鼠标进入出现框--------------------------------  */

        .right .right-li a:hover{
            color: #f10180;
        }
         .right .qing .qdl{
            position: relative;
            float: right;
            margin-top: -30px;
        } 

        .right .login a {
            position: relative;
        }
        .login-box #zheer{     
            display: inline-block;
            width: 69px;
            height: 1px;
            border: 1px solid transparent;
            background-color: white;
            position: relative;
            top:-18px;
        }

        .right .login-box {
            position: absolute;
            width: 280px;
            height: 200px;
            border: 1px solid #cdcdcd;
            background-color: #fff;
            font-size: 12px;
            display: none;
            z-index: 100;
            left: -1px;
             top: 29px;  
        }

        .right .login {
            display: block;
            width: 70px;
            height: 30px;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
            position: relative;
            z-index: 10;
        }

        .right .login:hover {
            border-left: 1px solid #cdcdcd;
            border-right: 1px solid #cdcdcd;
            background-color: #fff;
        }

        .right .login:hover .login-box {
            display: block;
        }

        .right .login-box .hai {
            position: relative;
            width: 38px;
            height: 38px;
            display: block;
            padding: 0 25px;
            background-color: #fff;
            border-radius: 50%;
            background: url(./img/header.png) no-repeat 0 -185px;
        }

        .right .login-box .shang {
            display: flex;
            padding: 10px 0 10px 10px;
        }

        .right .login-box span {
            display: inline-block;
            width: 150px;
            height: 30px;
            line-height: 30px;
            text-align: left;
            border-bottom: 1px dotted #666;
            position: relative;
            bottom: -10px;
        }

        .right .login-box .content tr td {
            padding-left: 30px;
        }
        .right .shang span:hover{
            color: #f10180;
        }
          .right .login-box .content tr td:hover{
              color: #f10180;
          }
/*签到有礼------------------------------------------  */
.right .qq{
    font-size: 12px;
    color: #666;
}
.right .right-boxqian{
     position: relative;
             z-index: 2;  
            width: 90px;
            height: 30px;
            margin-left: -3px;
            margin-right: 1px;
}
 .right-li .qdyl{
            position: relative;
             padding: 0 5px; 
            display: inline-block;
            width: 90px;
            height: 30px;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
        }
        .right-li  .qdxiegang{
             margin-left: -14px; 
        }

        .right .login-box2 {
            position: absolute;
            width: 400px;
            border: 1px solid #cdcdcd;
            background-color: #fff;
            font-size: 12px;
            left: -150px;
              padding: 10px 10px; 
             display: none; 

        }
            .right .right-boxqian:hover .login-box2{
                display: block;
            }

        .right .login-box2 .huise {
            display: inline-block;
            position: absolute;
            width: 13px;
            height: 8px;
            left: 190px;
            top: -8px;
            background: url('./img/sanjiao.png') -112px 0 no-repeat;
        }
        .right #day{
            display:flex;
             height: 100px;
    padding: 40px 0;
    border-bottom: 1px solid #ccc;
    width: 380px;
    position: relative;
        }
 .right #day li i{
    display: block;
    width: 20px;
    height: 20px;
    background: url("./img/header.png") -50px -200px;
  
     margin-right: 40px; 
 }
 .right #day li{
     position: relative;
 }
 .right #day li::after{
      content: '';
    width: 44px;
    height: 4px;
    background-color: #ccc;
    position: absolute;
    left: 18px;
    top: 6px;
 }
.right #day li:last-child::after{
    content: '';
    width: 0;
    height: 0;
} 
.login-box2 .signin-btn{
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
}
.login-box2.signin-btn a{
    text-decoration: underline;
}
.login-box2 .signin-btn a:hover{
    color: #f10180;
}
.login-box2 .signin-btn button{
    background-color: #f10180;
    border: none;
    color: white;
    padding: 5px 20px;    
    cursor: pointer;
}
   
/*我的特卖------------------------------  */
        .right-box4{
            position: relative;
             z-index: 2;  
            width: 90px;
            height: 30px;
            margin-left: -3px;
            margin-right: 1px;
        }
          .right-li .wdtm{
            position: relative;
            padding: 0 5px;
            display: inline-block;
            width: 90px;
            height: 30px;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
        }
         .right-li  .tmxiegang{
             margin-left: -20px; 
        }
          .right .right-box4:hover .wdtm{
            border-left: 1px solid #cdcdcd;
            border-right: 1px solid #cdcdcd;
            background-color: #fff;
         } 
         .right .right-box4:hover .icon {
            transform-origin: center center;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid transparent;
            border-bottom: 4px solid #f10180;
        }
        .right .right-box4 .temai-box{
            position: relative;
            width: 120px;
            border: 1px solid #cdcdcd;
            background-color: #fff;
            display: none;
        }
        .right .temai-box #zhesan{
            display: inline-block;
            width: 88px;
            height: 1px;
            border: 1px solid transparent;
            background-color: white;
            position: relative;
             top:-19px; 
        }
      .temai-box table{
          position: relative;
          top:-15px;
      }
         .temai-box table tr td{
             font-size: 12px;
             padding-left: 10px;
         }
          .temai-box table tr td:hover{
              color: #f10180;
          }
         .right .right-box4:hover .temai-box{
              display: block;
         }
/*会员俱乐部--------------------------  */
         .right-box5{
             width: 100px;
             height: 30px;
             position: relative;
             margin-left:-12px;
              z-index: 2; 
         }
          .right-li .huiyuan{
            position: relative;
            padding: 0 5px;
            display: inline-block;
            width: 100px;
            height: 30px;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
        }
         .right-li  .tmxiegang{
             margin-left: -20px; 
        }
          .right .right-box5:hover .huiyuan{
            border-left: 1px solid #cdcdcd;
            border-right: 1px solid #cdcdcd;
            background-color: #fff;
         } 
         .right .right-box5:hover .icon {
            transform-origin: center center;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid transparent;
            border-bottom: 4px solid #f10180;
        }
        .right .right-box5 .huiyuan-box{
            position: relative;
            display: block;
            width: 100px;
            border: 1px solid #cdcdcd;
            background-color: #fff;
            border-top: 1px solid transparent;
            display:none;
        }
      
         .huiyuan-box table tr td{
             font-size: 12px;
             padding-left: 10px;
         }
          .huiyuan-box table tr td:hover{
              color: #f10180;
          }
         .right .right-box5:hover .huiyuan-box{
             display: block;
         }
/*客服服务--------------------------  */
         .right-box6{
             position: relative;
             width: 100px;
             height: 30px;
             margin-left: -6px;
              z-index: 2; 
         }
          .right-li .kefu{
            position: relative;
            padding: 0 5px;
            display: inline-block;
            width: 100px;
            height: 30px;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
        }
         .right-li  .tmxiegang{
            margin-left: -20px;
        }
          .right .right-box6:hover .kefu{
            border-left: 1px solid #cdcdcd;
            border-right: 1px solid #cdcdcd;
            background-color: #fff;
         } 
         .right .right-box6:hover .icon {
            transform-origin: center center;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid transparent;
            border-bottom: 4px solid #f10180;
        }
        .right .right-box6 .kefu-box{
            position: relative;
            display: block;
            width: 100px;
            border: 1px solid #cdcdcd;
            background-color: #fff;
            border-top: 1px solid transparent;
            display: none;
        }
      
         .kefu-box table tr td{
             font-size: 12px;
             padding-left: 10px;
         }
          .kefu-box table tr td:hover{
              color: #f10180;
          }
         .right .right-box6:hover .kefu-box{
             display: block;
         }
/*手机版---------------------------------------------  */
.right-box7{
    width: 100px;
    height: 30px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    margin-left: -8px;
    padding-left: 8px;
}
.shouji-box{
    position: relative;
    width: 185px;
    height: 200px;
    border: 1px solid #cdcdcd;
    background-color: #fff;
    z-index: 2;
    margin-left: -94px; 
    display: none; 
}
.shouji-box #zhesi{
    display: inline-block;
    width: 98px;
    height: 1px;
    border: 1px solid transparent;
    background-color: white;
    position: relative;
    top:-19px; 
    left:85px;
}
.right-box7:hover{
    border-left: 1px solid #cdcdcd;
    border-right: 1px solid #cdcdcd;
    background-color: #fff;
}
.right-box7:hover .shouji-box{
    display: block;
}
.shouji-box .erweima{
    width: 150px;
    height: 150px;
    margin: 5px auto;
     margin-top: -15px; 
}
.shouji-box .erweima img{
     width: 150px;
    height: 150px;
}
.shouji-box  p {
      text-align: center; 
     margin: 3px auto;
}
.shouji-box  p a{
     font-size: 15px;  
}
.shouji-box  p:hover a{
    color: #f10180;
}
/*更多---------------------------------------------  */
.right-box8{
    width: 80px;
    height: 30px;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    position: relative;
      margin-left: -20px;  
      padding-left: 10px; 
      margin-right:20px; 
}
.gengduo-box{
    border: 1px solid red;
    position: relative;
    width: 300px;
    border: 1px solid #cdcdcd;
    background-color: #fff;;
    z-index: 10;
    margin-left: -231px;   
    display: none;  
}
      .gengduo-box #zhewu{
                display: inline-block;
    width: 79px;
    height: 1px;
    border: 1px solid transparent;
    background-color: white;
    position: relative;
    top:-19px; 
    left:219px;
            }
.right-box8:hover{
    border-left: 1px solid #cdcdcd;
    border-right: 1px solid #cdcdcd;
    background-color: #fff;
}
.right-box8:hover .gengduo-box{
    display: block;
}
.gengduo-box p,
.gengduo-box h5{
     margin: 0;
    padding-left: 20px;
    /* margin-top: 5px; */
    color: #000;
}
.right-box8 a:hover{
    color: #f10180;
}
.right-box8:hover .icon {
            transform-origin: center center;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid transparent;
            border-bottom: 4px solid #f10180;
        }


/*唯品会图片---------------------------------------------  */
         .wei{
             width: 100%;
             height: 100px;
         }
         .wei .main1{
             width: 1170px;
             height: 100px;
             margin: 0 auto;
             position: relative;  
             z-index: 1;
         }
         .wei .main1 .wei-left{
             width: 250px;
             height: 100px;
             background-image: url(./img/9.png);
             background-size: 100% 100%;
             background-repeat: no-repeat;
               margin-left: -20px;  
               margin-top: -1px;
         }
          .wei .main1 .wei-right{
              position: relative;
             width: 550px;
             height: 100px;
             float: right;
             margin-top: -100px;
          }
          .right-right1 a img{
             width: 120px;
             height: 100px;
          }
          .right-right2{
              width: 150px;
              height: 45px;
              line-height: 45px; 
             border: 1px solid transparent;
              position: relative;
              float: right; 
               margin-top: -80px; 
          }
           .right-right2:hover{
            border: 1px solid #cdcdcd;
            border-bottom: 1px solid transparent;
            background-color: #fff;
           }
          
          .right-right2 span{
               float: right; 
               padding-right: 5px;
               font-size: 12px;
          }
          .right-right2 span .package{   
              position: relative;
              padding-left: 35px;        
              display: inline-block;
              width: 25px;
              height: 25px; 
              line-height: 28px;  
              margin-top: 7px;          
              background: url('./img/header.png') no-repeat 6px -57px;
          }
          .package-box{
              position: relative;
              margin-top: 45px;
              width: 320px;
              padding: 16px 14px 14px 13px;
              background-color: #fff;
              border: 1px solid #d9d9d9;
              box-shadow: 0 1px 3px #d9d9d9;
              margin-left: -171px;
              font-size: 12px;
              display: none;
              /* top:-1px; */
          }
            .package-box .zheliu{
                display: inline-block;
    width: 148px;
    height: 1px;
    border: 1px solid transparent;
    background-color: white;
    position: relative;
    top:-18px; 
     left:14px; 
            }
           .package-box p{
               text-align: center;
           }
           .right-right2:hover .gouwudai{
               color:#f10180;
           }
          .right-right2:hover  .package-box{
              display: block;
          }
        .shopping-count {
    position: absolute;
    top:3px;
    left: 55px;
    background-color: #f10180;
    color: white;
    width: 24px;
    height: 16px;
    border-radius: 10px;
    text-align: center;
    line-height: 16px;
}
 /*导航条---------------------------------------------  */
       .nav2{
           width: 100%;
           height: 40px;
           line-height: 40px;
           background-color: #f10180;
           z-index: 1;
       }
       .nav2 .main2{
           width: 1170px;
           height: 40px;
           margin: 0 auto;
       }
       .nav2-left{
           position: relative;
           width: 750px;
           height: 40px;
           line-height: 40px;
           float: left;
       }
       .nav2-right{
           width: 200px;
           height: 40px;
           line-height: 40px;
           float: right; 
       }
       ul{
           margin: 0;
           padding: 0;
           list-style: none;
       }
       .nav2-left-ul{
           display: flex;
       }
       .nav2-left-ul li a{
            padding:0 15px; 
           text-decoration: none;
           color: #fff;
       }
       .active {
          background-color: #bd1067;
       }
       #active {
          background-color: #bd1067;
       }
       .nav2-left-ul li .gengduo i{
           display: inline-block;
           width: 0;
           height: 0;
           border-left: 5px solid transparent;
           border-right: 5px solid transparent;
           border-top: 5px solid #fff;
           position: relative;
            margin-left: -5px; 
       }
       .nav2-right .nav2-right-ul{
            display: flex;
       }
         .nav2-right-ul li a{
             padding:0 30px;   
           text-decoration: none;
           color: #fff;
       } 
       .nav2-right-ul{
         color: gray;
         margin-left: -20px;
       } 
        .nav2-right-ul li{
        width: 120px;
        height: 40px;
         margin-top: -1px; 
       } 
       .nav2-right-ul a{
        display: inline-block;
        width: 120px;
        height: 40px;
        line-height: 40px;
       }
        .nav2-right-ul a img{
           display: inline-block;
           position: relative; 
           vertical-align: middle; 
           padding: 0 4px;
           margin-top: -4px;
        }
       .more-box{
           width: 558px;
           max-height: 335px;
           box-shadow: 0 0 3px 3px rgba(0,0,0,.1);
           padding: 26px 10px 11px 26px;
           background-color: #fff;
            position: absolute; 
           right: 85px;
           top: 40px;
           z-index: 100;
           overflow: hidden;  
           display: none;  
       }
        #jiao:hover .more-box{
            display: block;
        }
        .nav2-left-ul #jiao:hover .morejiao {
            transform-origin: center center;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid transparent;
            border-bottom: 5px solid #fff;
        }
         .more-m{
            margin-top: -10px;
            margin-bottom: 20px;
        } 
        .more-box ul li{
            width: 150px;
            height: 100px;
            float: left;
            margin-left: 20px;
            margin-top: 10px;
            position: relative;
            overflow: hidden;
        }
        .more-box ul li img{
            width: 150px;
            height: 100px;
            position: absolute; 
        }
        .more-box #shadow{
             width: 150px;
             height: 100px;
             background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.9) 100%);
             position:absolute;
             transition: all 0.3s linear;
             top:50%;
             z-index: 2;
             
            } 
            .more-box li:hover #shadow{
               top:0;        
            }
            .more-m .nvzhuang p{
                color:#fff;
                font-size: 16px;
                text-align: center;   
            } 
             .more-m .nvzhuang{
                width: 100%;
                height: 100%;
                position:absolute; 
                top:50%;
                z-index: 3;
                transition: all 0.3s linear; 
            }
            .more-box li:hover .nvzhuang{
                top:10px;
            } 
/*-- 轮播图-------------------------------------------- */
 .middle{
     width: 100vw;
     height: 500px;
     background-image: url('./img/dabj.jpg');
     position: absolute;
 }
 .box{
      width: 1170px;
      height: 450px;
      margin: 0 auto;
      position: relative; 
      margin-top: 40px;
      background-color: #fff;
      border: 1px solid #d9d9d9;
      box-shadow: 0 5px 5px #d9d9d9;
     
 }
  .img-list li img{
      width: 1150px;
      position: relative;
      margin-left: 10px;
      margin-top: 10px;
  }

    .img-list li {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        .img-list li.current {
            display: block;
        }

        .indicator {
            width: 100%; 
            position: absolute;
            left: 0;
            bottom: -2px;
            display: flex;
            justify-content: center;
            color: white;
        }

        .indicator li {
            width: 200px;
            height: 40px;
            line-height: 40px;
            background-color: #fff; 
            text-align: center;
            border:2px solid  #fff;
            color: #777;
            font-size: 13px;
             box-shadow: 0 1px 3px #d9d9d9; 
             border-bottom-color: #d9d9d9; 
        }

        .indicator li.active {
            border-bottom-color: #f10180;
            cursor: pointer;
        }

        .img-click span {
            width: 33px;
            height: 66px;
            line-height: 66px;
            text-align: center;
            color: white;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
            top: calc(50% - 20px);
            cursor: pointer;
        }

        .img-click .prev {
            left: 10px;
        }

        .img-click .next {
            right: 10px;
        }
/*底部------------------------------------------------  */
        .bottom{
            position: relative;
            width: 100%;
            height: 200px;
            bottom: -500px;
        }
        .bottom-box{
            width: 1150px;
            height: 150px;
            margin: 0 auto;
            background-image: url('./img/xiaobj.jpg');  
        }
         .bottom-right{
             width: 580px;
             height: 150px;
             line-height: 150px;
             float:right;
             display: flex;
             justify-content: space-around;
         }
         .bottom-right>div{
             width: 150px;
             height: 130px;
             border: 1px solid red;
             margin-top: 10px;
         }
         .bottom1 a img{
             width: 150px;
             height: 130px;
         }
         .bottom1:hover{
             opacity: 0.9;
         }
          .bottom1 .you-picture{
              display: inline-block;
              position: relative;
              width: 40px;
              height: 40px; 
              background:url('./img/icon.png') -3px -3px no-repeat;
              top:-250px;
              left:120px;
          }
         .bootom-pcture{
             width: 100%;
             text-align: center; 
             margin-top: 20px;
         }
 /* 右边侧栏---------------------------------------------------------  */
 .side-box{
    width: 36px;
    height: 100%;
    background-color: #262626;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    color: white;
    text-align: center;
    font-size: 14px;
    min-height: 900px;
}
 .side-box a{
     text-decoration: #666;
 }
 .side-box .close{
     color: #666;
 }
    .side-box .member {
        color: inherit;
        position: relative;
        margin-top:-10px;
        padding-bottom: 10px;
    }
.side-box .side-box-list{
    position: absolute;
    top: 200px;
    left: 0;
    background-color: #262626;
}
.side-box .side-box-list>li{
    margin: 5px 0;
    padding: 10px 0;
    background-color: #262626;
    position: relative;
}
.side-box .side-box-list .account-move{
    width: 276px;
    height: 306px;
    background-color: #fff;
    border: 1px solid #ccc;
    position: absolute;
    top: 0;
    left: 0px;
    color: #333;
    font-size: 12px;
    z-index: -100;
    transition: all 0.2s linear;
}
.side-box .side-box-list .account:hover .account-move{
    left: -276px;
    box-shadow: 0 0 5px #aaa;
}
.account-move .header-img{
    padding-top: 40px;
    padding-bottom: 20px;
}
.account-move .header-img img{
    box-shadow: 0 0 3px #aaa;
    padding: 1px;
}
.account-move .header-img p{
    padding-top: 10px;
}
.account-move .header-img p a{
    color: #f10180;
}
.account-move .message{
    width: 100%;
    display: flex;
    padding: 14px 0;
    background-color: #f8f8f8;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.account-move .message li{
    width: 50%;
    height: 76px;
    display: flex;
}
.account-move .message li a{
    width: 100%;
    height: 100%;
    padding-top: 10px;
}
 .account-move .message li:first-child a{
     border-right: 1px solid #e5e5e5;
 } 
.account-move .message li #icon{
    display: inline-block; 
    background-color: red;
    width: 25px;
    height: 25px;
    background: url("./img/sprite.png") -200px -90px;
}
.account-move .message li.order:hover #icon{
    background: url("./img/sprite.png") -200px -0px;
}
.account-move .message li.msg #icon{
    background: url("./img/sprite.png") -200px -60px;
}
.account-move .message li.msg:hover #icon{
    background: url("./img/sprite.png") -200px -30px;
}

.account-move .member{
    height: 300px;
    color: #20a0cd;
    text-align: right;
    padding-right: 10px;
    line-height: 30px;
}
/* .account-move .member{
    color: #20a0cd;
    text-align: right;
    padding-right: 10px;
    padding-top: 5px;
} */
.account .close{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
}
.side-box .side-box-list li.shopping-bag{
    background-color: #f10180;
}
.side-box .side-box-list li.shopping-bag p{
    padding: 0 10px;
}
.side-box .side-box-list li.shopping-bag .count{
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    color: #f10180;
    background-color: white;
}
.side-box .side-box-list>li:hover{
    background-color: #f10180;
}
.side-box .side-box-bottom{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}
.side-box .side-box-bottom>li{
    margin: 5px 0;
    padding: 10px 0;
    background-color: #262626;
    position: relative;
}
.side-box .side-box-bottom>li>a{
    width: 36px;
    height: 40px;
}
.side-box .side-box-bottom>li:hover{
    background-color: #f10180;
}
.side-box .side-move{
    height: 41px;
    width: 36px;   
}
.side-box .side-move p{
     margin-top:15px; 
    position: absolute;
    top: -15px;
    left: 0;
    background-color: white;
    color: #333;
    border: 1px solid #ccc;
    width: 100px;
    height: 41px;
    line-height: 41px;
    transition: all 0.2s linear;
     z-index: -1; 
}
.side-box .side-move:hover p{
    transform: translate(-100%);
}
  .side-box i, 
.side-box p{
    color: white;
} 
    </style>


</head>
<body>
    <header>
        <nav class="top-nav">
            <div class="nav-middle">
                <!--左边  -->
                <div class="left clearfix">
                    <div class="left1">
                        <div class="left11">
                            <span class="henan">河南</span>
                            <i class="icon"></i>
                        </div>
                        <div class="left-box">
                            <span class="zheyi"></span>
                            <p>请选择所在地的收获地区</p>
                            <table>
                                <tr>
                                    <th>A</th>
                                    <td><span>安微</span><span>澳门</span></td>
                                </tr>
                                <tr>
                                    <th>B</th>
                                    <td><span>北京</span></td>
                                </tr>
                                <tr>
                                    <th>C</th>
                                    <td><span>重庆</span></td>
                                </tr>
                                <tr>
                                    <th>F</th>
                                    <td><span>福建</span></td>
                                </tr>
                                <tr>
                                    <th>G</th>
                                    <td><span>广东</span><span>广西</span><span>贵州</span><span>甘肃</span></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <!--右边  -->
                <ul class="right clearfix">
                    <li class="qing">
             <span class="login right-li">
                     <a href="#">请登录</a>
                     
            <div class="login-box">
                <span  id="zheer"></span>
                      <div class="shang">
                            <i class="hai"></i>
                            <span>您好！[请登录]</span>
                       </div>
            <div class="content">
                <table>
                    <tr>
                        <td>我的收藏</td>
                        <td>我的订单</td>
                    </tr>
                    <tr>
                        <td>零钱</td>
                        <td>我的优惠券</td>
                    </tr>
                    <tr>
                        <td>我的唯品币</td>
                        <td>唯品金融</td>
                    </tr>
                </table>
            </div>
            </div>
            </span>
         <span class="qdl">/</span> 
            </li>

            <li class="register right-li">
                <span>
                    <a href="#">注册</a>
                     <span>/</span> 
                </span>
            </li>
            <li class="right-li">
                       <div class="right-boxqian">
                        <span class="qdyl">
                           <i class="lihe"></i>
                           <span class="qq">签到有礼</span>
                        </span>
                         <span class='qdxiegang'>/</span>  
                           <div class="login-box2"> 
                             <i class="huise">  </i>
                               <!-- <span class="huise"></span> -->
                        <ul id="day">
                            <li>
                                <i></i>
                                <p>1天</p>
                            </li>
                            <li>
                                <i></i>
                                <p>2天</p>
                            </li>
                            <li>
                                <i></i>
                                <p>3天</p>
                            </li>
                            <li>
                                <i></i>
                                <p>4天</p>
                            </li>
                            <li>
                                <i></i>
                                <p>5天</p>
                            </li>
                            <li>
                                <i></i>
                                <p>6天</p>
                            </li>
                            <li>
                                <i></i>
                                <p>7天</p>
                            </li>
                        </ul>
                        <div class="signin-btn">
                            <a href="javascript:;">每天签到送惊喜， 连续签到更享心动奖励</a>
                            <button type="button">签到</button>
                        </div>
                           </div>
                       </div>
            </li>
            <li class="right-li">
                       <span>
                           <a href="#">我的订单</a>
                       </span>
                         <span>/</span> 
            </li>
            <li class="right-li">
                      <div class="right-box4">
                        <span class="wdtm">
                           <a href="#">我的特卖</a>
                           <i class="icon"></i>
                       </span>
                        <span class="tmxiegang">/</span>   
                        <div class="temai-box">
                            <span id="zhesan"></span>
                            <table>
                                <tr><td>品牌收藏(0)</td></tr>
                                <tr><td>商品收藏(0)</td></tr>
                                <tr><td>我的足迹(0)</td></tr>
                            </table>
                        </div>  
                        </div>          
            </li>
            <li class="right-li">
                      <div class="right-box5">
                           <span class="huiyuan">
                           <a href="#">会员俱乐部</a>
                           <i class="icon"></i>
                       </span>
                         <span class="tmxiegang">/</span>   
                         <div class="huiyuan-box">    
                                 <table>
                                     <tr><td>俱乐部首页</td></tr>
                                     <tr><td>唯品币兑换</td></tr>
                                     <tr><td>免费抽大奖</td></tr>
                                 </table>
                         </div>
                      </div>
            </li>
            <li class="right-li">
                       <div class="right-box6">
                       <span class="kefu">
                           <a href="#">客服服务</a>
                           <i class="icon"></i>
                       </span>
                         <span class="tmxiegang">/</span>   
                        <div class="kefu-box">
                             <table>
                             <tr><td>练习客服</td></tr>
                             <tr><td>帮助中心</td></tr>
                             <tr><td>服务中心</td></tr>
                             <tr><td>知识产权投诉</td></tr>
                         </table>
                        </div>
                       </div>
            </li>
            <li class="right-li">
                       <div class="right-box7">
                           <span>
                           <i class="phone"></i>
                           <a href="#">手机版</a>
                          </span>
                       <span >/</span> 
                       <div class="shouji-box">
                           <span id="zhesi"></span>
                           <div class="erweima"><img src="./img/erweima.jpg" alt=""></div>
                        <p><a href="#">岁时逛&nbsp;及时抢</a></p>
                        </div>
                       </div>
            </li>
            <li>
                      <div class="right-box8">
                           <span>
                           <a href="#">更多</a>
                           <i class="icon"></i>
                       </span>
                        <div class="gengduo-box">
                            <span id="zhewu"></span>
                            <div>
                                <h5>合作专区</h5>
                                <p>
                                    <a href="#">联名卡申请</a>
                                    <a href="#">唯品卡</a>
                                    <a href="#">支付专区</a>
                                </p>
                                <h5>关于我们</h5>
                                <p>
                                    <a href="#">Sell on vip</a>
                                    <a href="#">品牌招商</a>
                                    <a href="#">官方博客</a>
                                </p>
                            </div>
                        </div>
                      </div>
            </li>
            <!-- <div class="clear"></div> -->
            </ul>
            </div>
        </nav>
 <!-- 唯品会图片-------------------------------------------- -->  
        <div class="wei">
            <div class="main1">
                <div class="wei-left"></div>
                <div class="wei-right">
                    <div class="right-right1">
                         <a href="#"><img src="./img/1.png" alt=""></a>
                         <a href="#"><img src="./img/2.png" alt=""></a>
                         <a href="#"><img src="./img/3.png" alt=""></a>
                   </div>
                   <div class="right-right2">
                       <span class="gouwudai">
                         <i class="package"></i>
                         <span class="shopping-count">0</span>
                         <span>我的购物袋</span>
                       </span>
                        <div class="package-box">
                            <span class="zheliu"></span>
                            <p>好像还未登录！<a href="#" style="color:#f10180">马上登录</a> 查看购物袋</p>
                        </div>
                   </div>
                </div>
            </div>
        </div>  
        </header>        
 <!-- 导航条-------------------------------------------- -->
 <nav class="nav2">
     <div class="main2">
         <div class="nav2-left">
             <ul class="nav2-left-ul yiyang">
                 <li class="active" id="active"><a href="#">首页</a></li>
                 <li><a href="#">唯品国际</a></li>
                 <li><a href="#">母婴</a></li>
                 <li><a href="#">家具家电</a></li>
                 <li><a href="#">男士</a></li>
                 <li><a href="#">美妆</a></li>
                 <li><a href="#">生活超市</a></li>
                 <li><a href="#">金融</a></li>
                 <li id="jiao">
                     <span class="gengduo">
                         <a href="#">更多</a>
                         <i class="morejiao"></i>
                     </span>
                        <div class="more-box">
                            <ul class="more-m">
                                <li>
                                    <img src="./img/4.jpg" alt="">
                                     <div id="shadow"></div>
                                    <div class="nvzhuang"><p>女装</p></div>
                                </li>
                                <li>
                                    <img src="./img/5.jpg" alt="">
                                    <div id="shadow"></div>
                                    <div class="nvzhuang"><p>鞋包</p></div>   
                                </li>
                                <li>
                                    <img src="./img/6.jpg" alt="">
                                    <div id="shadow"></div>
                                    <div class="nvzhuang"><p>配饰</p></div>    
                                </li>                                                           
                                <li>
                                    <img src="./img/7.jpg" alt="">
                                    <div id="shadow"></div>
                                    <div class="nvzhuang"><p>运动</p></div>
                                </li>                                                              
                                <li>
                                    <img src="./img/8.jpg" alt="">
                                    <div id="shadow"></div> 
                                    <div class="nvzhuang"><p>唯品奢</p></div>
                                </li>                                                          
                            </ul>
                        </div>
                </li>
             </ul>
         </div>
         <div class="nav2-right">
             <ul class="nav2-right-ul  yiyang">
                 <li class="gang">
                     <a href="#"><img src="./img/fenlei.png" alt="">分类</a>
                 </li>|
                 <li class="yugao">
                     <a href="#"><img src="./img/baogao.png" alt="">预告</a>
                 </li>
             </ul>
         </div>
     </div>
 </nav>
    
 <!-- 轮播图-------------------------------------------- -->
 <div class="middle">
     <div class="box">
           <ul class="img-list">
            <!-- (li>a[href=#]>img[src=img/$$.jpg])*5 -->
            <li class="current"><a href="#"><img src="./img/d1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/d2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/d3.jpg" alt=""></a></li>

        </ul>
        <ul class="indicator">
            <li class="active">时尚风暴&nbsp;最高满199减40</li>
            <li>净水节&nbsp;最高500 元红包</li>
            <li>安莉芳集团&nbsp;跨专场3件8折</li>
        </ul>
        <div class="img-click">
            <span class="prev">&lt;</span>
            <span class="next">&gt;</span>
        </div>
     </div>

 </div>
<!-- 底部-------------------------------------------- -->  
    <div class="bottom">
        <div class="bottom-box">
            <div class="bottom-right">
                <div class="bottom1">
                    
                <a href="#"><img src="./img/12.jpg" alt=""></a>
                <i class="you-picture"></i>
                </div>
                <div class="bottom1">
                     <a href="#"><img src="./img/11.jpg" alt=""></a>
                     <i class="you-picture"></i>
                </div>
                <div class="bottom1">
                     <a href="#"><img src="./img/10.jpg" alt=""></a>
                     <i class="you-picture"></i>
                </div>
            </div>
        </div>
        <div class="bootom-pcture">
            <img src="./img/title_v2.jpg" alt="">
        </div>
    </div>
  <!--右边侧栏  -->
 <div class="side-box">
        <ul class="side-box-list">
            <li class="account">
                <a href="javascript:;">
                    <i class="fa fa-user-o"></i>
                    <p>账号</p>
                </a>
                <div class="account-move">
                    <div class="header-img">
                        <img src="./img/my_cnt_pic.jpg" alt="">
                        <p> 你好！请
                            <a href="javascript:;">登录</a> | 
                            <a href="javascript:;">注册</a>
                        </p>
                    </div>
                    <ul class="message">
                        <li class="order">
                            <a href="javascript:;">
                                <i id="icon"></i>
                                <p>我的订单</p>
                            </a>
                        </li>
                        <li class="msg">
                            <a href="javascript:;">
                                <i id="icon"></i>
                                <p>我的消息</p>
                            </a>
                        </li>
                    </ul>
                    <div class="member">
                        <a href="javascropt:;">会员俱乐部</a>
                    </div>
                    <a href="javascript:;" class="close">&times;</a>
                </div>
            </li>
            <li class="shopping-bag">
                <a href="javascript:;">
                    <i class="fa fa-shopping-bag"></i>
                    <p>购物袋</p>
                    <span class="count">0</span>
                </a>
            </li>
            <li class="side-move">
                <a href="javascript:;">
                    <i class="fa fa-user-o"></i>
                    <p>我的优惠券</p>
                </a>
            </li>
            <li class="side-move">
                <a href="javascript:;">
                    <i class="fa fa-heart-o"></i>
                    <p>品牌收藏</p>
                </a>
            </li>
            <li class="side-move">
                <a href="javascript:;">
                    <i class="fa fa-heart-o"></i>
                    <p>商品收藏</p>
                </a>
            </li>
            <li class="side-move">
                <a href="javascript:;">
                    <i class="fa fa-user-o"></i>
                    <p>我的足迹</p>
                </a>
            </li>
        </ul>
        <ul class="side-box-bottom">
            <li class="side-move">
                <a href="javascript:;">
                    <i class="fa fa-user-o"></i>
                    <p>会员反馈</p>
                </a>
            </li>
            <li class="side-move">
                <a href="#">
                    <i class="fa fa-angle-up"></i>
                    <p>返回顶部</p>
                </a>
            </li>
        </ul>
    </div>

   



</body>
</html>
<script>
 var allli = document.querySelectorAll('.main2 .yiyang>li');
 for(var i = 0;i < allli.length;i++){
     allli[i].index = i;
     allli[i].onmouseover = function(){
         allli[this.index].className = 'active';
     }
     allli[i].onmouseout = function(){
         allli[this.index].className = '';
     }
 }
//  轮播图
 window.onload = function () {
        var middle = document.querySelector('.middle');
        var box = document.querySelector('.box');
        var imgLis = document.querySelectorAll('.img-list li');
        var indicatorLis = document.querySelectorAll('.indicator li');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var index = 0;
        function prevImg() {
            index = index == 0 ? imgLis.length - 1 : index - 1;
            showImg();
        }
        function nextImg() {
            index = index == imgLis.length - 1 ? 0 : index + 1;
            showImg();
        }
        function showImg() {
            for (var i = 0; i < imgLis.length; i++) {
                imgLis[i].className = '';
                indicatorLis[i].className = '';
            }
            console.log(index);
            imgLis[index].className = 'current';
            indicatorLis[index].className = 'active';
        }
        var timer = setInterval(nextImg, 3000);
        for (var i = 0; i < indicatorLis.length; i++) {
            indicatorLis[i].index = i;
            indicatorLis[i].onmouseover = function () {
                clearInterval(timer);
                timer = null;
                index = this.index;
                showImg();
            }
            indicatorLis[i].onmouseout = function () {
                if (timer != null) {
                    return;
                }
                timer = setInterval(nextImg, 3000);
            }
        }
        middle.onmouseover = function () {
            clearInterval(timer);
            timer = null;
            prev.style.display = 'block';
            next.style.display = 'block';
        }
        middle.onmouseout = function () {
            if (timer) return;
            timer = setInterval(nextImg, 1000);
            prev.style.display = 'none';
            next.style.display = 'none';
        }
        prev.onclick = function () {
            prevImg();
        }
        next.onclick = function () {
            nextImg();
        }
    }
    // -------------------------------
    var close = document.querySelector('.account .close');
var accountMove = document.querySelector('.account .account-move');
var account = document.querySelector('.side-box .side-box-list .account');
account.onmouseover = function(){
    accountMove.style.left = -accountMove.offsetWidth + 'px';
}
account.onmouseout = function(){
    accountMove.style.left = 0;
}
close.onclick = function(){
    accountMove.style.left = 0;

}
</script>